<template>
    <div>
        <div class='crumbs'>
            <el-breadcrumb separator='/'>
                <el-breadcrumb-item><i class='el-icon-lx-emoji'></i> 新闻中心</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class='container'>
            <div class='condition'>
                <el-input v-model='dataForm.title' placeholder='标题' clearable style='width: 200px;margin-right: 15px' />
                <el-date-picker
                    v-model='dataForm.daterange'
                    type='daterange'
                    value-format="yyyy-MM-dd"
                    :picker-options='pickerOptions'
                    range-separator='至'
                    start-placeholder='开始日期'
                    end-placeholder='结束日期'
                    align='right'>
                </el-date-picker>
                <el-select style='margin-left: 15px' v-model='dataForm.order' placeholder='请选择'>
                    <el-option label='倒序' value='desc'></el-option>
                    <el-option label='升序' value='asc'></el-option>
                </el-select>
                <el-button style='margin-left: 15px' type='primary' @click='getDataList()'>查询</el-button>
                <router-link :to='{path:`addNews?id=${undefined}`}'>
                    <el-button style='margin-left: 15px' type='primary' plain>发布</el-button>
                </router-link>
            </div>
            <div>
                <el-table
                    :data='dataList'
                    border
                    v-loading='dataListLoading'
                    @selection-change='selectionChangeHandle'
                    style='width: 100%;'>
                    <el-table-column
                        type='selection'
                        header-align='center'
                        align='center'
                        width='50'>
                    </el-table-column>
                    <el-table-column
                        prop='id'
                        header-align='center'
                        align='center'
                        width='80'
                        label='ID'>
                    </el-table-column>
                    <el-table-column
                        prop='title'
                        header-align='center'
                        align='center'
                        label='标题'>
                    </el-table-column>
                    <el-table-column
                        header-align='center'
                        align='center'
                        label='封面'>
                        <template slot-scope='scope'>
                            <img :src='scope.row.cover' class='cover'>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop='publishTime'
                        header-align='center'
                        align='center'
                        label='发布时间'>
                    </el-table-column>
                    <el-table-column
                        header-align='center'
                        align='center'
                        label='状态'>
                        <template slot-scope='scope'>
                            <div  @click="changeState(scope.row)">
                                <el-switch
                                    active-text="正常"
                                    inactive-text="下架"
                                    v-model='scope.row.status'
                                    active-color='#13ce66'
                                    inactive-color='#ff4949'>
                                </el-switch>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed='right'
                        header-align='center'
                        align='center'
                        width='150'
                        label='操作'>
                        <template slot-scope='scope'>
                            <router-link :to='{path:`addNews?id=${scope.row.id}`}'>
                                <el-button style='margin-left: 15px'type='text' size='small' >修改</el-button>
                            </router-link>
                            <el-button style='margin-left: 10px' type='text' size='small' @click='deleteHandle(scope.row.id)'>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    style='margin-top: 10px'
                    @size-change='sizeChangeHandle'
                    @current-change='currentChangeHandle'
                    :current-page='pageIndex'
                    :page-sizes='[10, 20, 50, 100]'
                    :page-size='pageSize'
                    :total='totalPage'
                    layout='total, sizes, prev, pager, next, jumper'>
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import apis from '@/api/apis';

export default {
    data: function() {
        return {
            dataForm: {
                title: '',
                daterange:[],
                order: '',
            },
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            dataList: [],
            dataListLoading: false,
            dataListSelections: []
        };
    },
    created() {
        this.getDataList();
    },
    methods: {
        changeState(row){
            apis.saveNews(row).then(res=>{
                if(res.code===0){
                    this.$message.success("修改成功")
                }else{
                    this.$message.success(res.msg)
                }
            })
        },
        // 删除
        deleteHandle(id) {
            var ids = id ? [id] : this.dataListSelections.map(item => {
                return item.id;
            });
            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                apis.deleteNews(ids).then(data => {
                    if (data && data.code === 0) {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.getDataList();
                            }
                        });
                    } else {
                        this.$message.error(data.msg);
                    }
                });
            }).catch(() => {
            });
        },
        getDataList() {
            this.dataListLoading = true;
            var params = {
                'page': this.pageIndex,
                'limit': this.pageSize,
                'title': this.dataForm.title,
                'daterange':this.dataForm.daterange,
                'order': this.dataForm.order,
            };
            apis.getNewsData(params).then(data => {
                if (data && data.code === 0) {
                    this.dataList = data.page.list;
                    this.totalPage = data.page.totalCount;
                } else {
                    this.dataList = [];
                    this.totalPage = 0;
                }
                this.dataListLoading = false;
            });
        },
        addOrUpdateHandle(id) {
            this.$router.push({
                name:`addNews?id=${id}`
            })
        },
        // 每页数
        sizeChangeHandle(val) {
            this.pageSize = val;
            this.pageIndex = 1;
            this.getDataList();
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val;
            this.getDataList();
        },
        // 多选
        selectionChangeHandle(val) {
            this.dataListSelections = val;
        }
    }
};
</script>

<style scoped>
.cover {
    width: 50px;
    height: 50px;
}
.condition{
    margin-bottom: 15px;
}
</style>
